<template>
    <div class="CommentPost" v-if="myuser">
        <div class="CommentPost_title">
            <span>评论</span>
            <span>({{dataLenght}})</span>
        </div>
        <div class="CommentPost_btn">
            <img :src="myuser.user_img" alt="" v-if="myuser.user_img">
            <img src="../assets/user.jpg" alt="" v-else>
            <input type="text" placeholder="请输入你要评论的话！！" v-model="CommentPost_text" ref="Postipt">
            <button @click="CommentPost_click">发表</button>
        </div>
    </div>
</template>

<script>
export default {
    props:['dataLenght'],
    data(){
        return {
            myuser:null,
            CommentPost_text:''
        }
    },
    created(){
        this.myUserinfo()
    },
    methods:{
        async myUserinfo(){
            const res = await this.$http.get('/user/'+localStorage.getItem('id'))
            this.myuser = res.data[0]
        },
        CommentPost_click(){
            if(!localStorage.getItem('id') && !localStorage.getItem('token')){
                 this.$notify({
                    message: "请先登入!!!",
                    color: "red",
                    background: "#ffe1e1"
                })
                return;
            }
            if(this.CommentPost_text.trim() != ''){
                this.$emit('comment_click',this.CommentPost_text)
                this.CommentPost_text = ''
            }else{
                 this.$notify({
                    message: "请不要输入空白！！！",
                    color: "red",
                    background: "#ffe1e1"
                })
            }
        },
        focusIpt(){
            this.$refs.Postipt.focus();
        }
    }
}
</script>

<style lang="less" scoped>
.CommentPost{
    padding: 2.778vw 3.333vw;
    .CommentPost_title{
        padding: 2.778vw 0;
        span:nth-child(1){
            font-size: 4.444vw;
            color: black; 
        }
        span:nth-child(2){
            font-size: 3.889vw;
            color:#aaa;
            margin-left: 1.389vw;
        }
    }
    .CommentPost_btn{
        display: flex;
        align-items: center;
        img{
            display: block;
            width: 8.333vw;
            height: 8.333vw;
            border-radius: 50%;
            box-shadow: 0 0 2.778vw rgb(134, 132, 132);
        }
        input{
            flex: 1;
            height: 7vw;
            margin:0 2vw 0 3vw;
            border-radius: 4.167vw;
            border: none;
            background-color: #aaa;
            padding-left: 2.778vw;
            font-size: 3.889vw;
          
        }
        ::placeholder{
                color: #fff;
                opacity: 0.5;
        }
        button{
            padding: 1vw 2.778vw;
            background-color: rgb(255, 169, 181);
            border: none;
            cursor: pointer;
            color: #fff;
            border-radius: 2.778vw;
            font-size: 3.889vw;
        }
    }
    
    
}
</style>
